<template>
  <div class="table">
    <div class="top">
      <div class="item">
        <div class="label">
          <span>*</span>
          <span>作业码头：</span>
        </div>
        <el-select
          v-model="form.termCode"
          @change="$emit('setTerm', form.termCode)"
          :disabled="seeFlag"
          placeholder="搜索查询更多"
          clearable
          filterable
          size="small"
          style="width: 200px"
        >
          <el-option
            :label="item.cnName"
            :value="item.termCode"
            v-for="(item, index) in dataList.termList"
            :key="index"
          ></el-option>
        </el-select>
      </div>
      <div class="item">
        <div class="label">
          <span>*</span>
          <span>箱号：</span>
        </div>
        <el-input
          v-model="form.cntrNo"
          :disabled="seeFlag"
          placeholder="请输入"
          size="small"
          @input="selectInput"
          style="width: 200px"
        >
        </el-input>
      </div>
      <div class="item">
        <el-button
          type="primary"
          class="search"
          v-if="!seeFlag"
          @click="getDate"
          >查询</el-button
        >
        <el-button type="info" size="small" @click="clearBoxTable"
          >清空</el-button
        >
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        @selection-change="handleSelectionchangeS"
        :header-cell-style="{ background: '#EEF1F5' }"
        style="width: 100%"
      >
        <el-table-column type="selection" :selectable="selectable" width="55">
        </el-table-column>
        <el-table-column prop="cntrno" label="箱号" width="180">
        </el-table-column>
        <el-table-column prop="ctypecd" label="船公司箱型" width="180">
        </el-table-column>
        <el-table-column prop="cstCopercd" label="持箱人" min-width="220">
          <template slot-scope="scope">
            {{
              (scope.row.cstCopercd || "") +
              "/" +
              (scope.row.cstCoperName || "")
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="cstOwnercd"
          label="箱控公司"
          width="180"
        ></el-table-column>
        <el-table-column prop="internalfg" label="贸易类型" width="180">
          <template slot-scope="scope">
            {{
              scope.row.internalfg == "Y"
                ? "内贸"
                : scope.row.internalfg == "N"
                ? "外贸"
                : scope.row.internalfg || ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="dirtycd" label="坏/污" width="180">
        </el-table-column>
        <el-table-column prop="attachOperation" label="附加操作" width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "emptyTableNum",
  components: {},
  data() {
    return {
      dataList: {
        termList: [],
      },
      form: {
        planTag: "PERF_WC",
        termCode: "",
        cntrNo: "",
      },
      oriForm: {
        planTag: "PERF_WC",
      },
      tableData: [],
      selection: [],
    };
  },
  props: {
    setTag: "",
    seeFlag: {
      default: false,
    },
  },
  watch: {
    setTag() {
      this.form.planTag = this.setTag;
      this.oriForm.planTag = this.setTag;
    },
  },
  created() {
    this.term();
  },
  methods: {
    // 筛选el-input 只能输入数字字母和分号
    selectInput(event) {
      const input = event;
      // 使用正则表达式过滤输入，只允许数字、字母和分号
      const filteredInput = input.replace(/[^a-zA-Z0-9;]/g, "");
      this.form.cntrNo = filteredInput;
    },
    term() {
      this.$api.term().then((res) => {
        this.dataList.termList = res.data.data;
      });
    },
    selectable() {
      return !this.seeFlag;
    },
    handleSelectionchangeS(val) {
      this.selection = val;
      //this.$refs.table.toggleRowSelection(val, true);
    },
    clearBoxTable() {
      this.tableData = [];
    },
    getDate() {
      this.tableData = [];
      if (!this.form.termCode) {
        this.$message.error("请选择码头");
        return;
      }
      if (!this.form.cntrNo) {
        this.$message.error("请输入箱号");
        return;
      }
      this.$emit("set", this.form.termCode);

      this.tableData = [];
      const cntrNos = this.form.cntrNo
        .split(";")
        .map((item) => item.trim())
        .filter((item) => item);
      const promises = cntrNos.map((cntrNo) => {
        const formData = { ...this.form, cntrNo };
        return this.$api
          .tosGetContainer(formData)
          .then((res) => {
            let setBoxs = new Set();
            for (let b of this.tableData) {
              setBoxs.add(b.cntrno);
            }
            for (let e of res.data) {
              if (!setBoxs.has(e.cntrno)) {
                this.tableData.push(e);
                setBoxs.add(e.cntrno);
              }
            }
          })
          .catch((err) => {
            console.log("查无数据:", err);
          });
      });
      Promise.all(promises)
        .then(() => {
          console.log("所有请求已完成");
        })
        .catch((err) => {
          console.log("发生错误:", err);
        });
      // this.$api.tosGetContainer(this.form).then(res=>{
      //       let setBoxs = new Set();
      //       for(let b of this.tableData){
      //           setBoxs.add(b.cntrno)
      //       }
      //       for(let e of res.data){
      //           if(!setBoxs.has(e.cntrno)){
      //               this.tableData.push(e)
      //               setBoxs.add(e.cntrno)
      //           }
      //       }
      //   }).catch(res=>{
      //       console.log("查无数据:"+res.data)
      //       // this.tableData=[]
      // })
    },
  },

  computed: {},

  mounted() {},
};
</script>
<style lang="less" scoped>
.table {
  background: #fff;
  .top {
    padding: 20px;
    border-bottom: 1px solid #d7d7d7;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 16px;
    display: flex;
    .item {
      display: flex;
      align-items: center;
      margin-right: 20px;
      .label {
        margin-right: 5px;
        span:first-child {
          color: #ff3838;
        }
      }
    }
    .search {
      background: #0f47b8;
      height: 30px;
      padding: 5px 10px;
    }
  }
  .table {
    padding: 20px;
  }
}
</style>
